export default {
  name: 'mixDistrict',
  data: () => ({
    option: {}
  }),
  methods: {
    // 用来做共有属性option 使用
    /**
     * params:{colorList : 颜色数组;legendData:图例数据, xAxisData:X轴数据, seriesData:图表数据}
     */
    getOption(params) {
      const { legendData, colorList, xAxisData, seriesData } = params
      let zoomLength = xAxisData.length - 1
      if (zoomLength > xAxisData.length) {
        zoomLength = xAxisData.length - 1
        if (zoomLength < 0) {
          zoomLength = 0
        }
      }
      let dataZoom
      if (zoomLength > 0) {
        dataZoom = {
          type: 'slider',
          endValue: zoomLength,
          startValue: 0,
          xAxisIndex: 0,
          zoomLock: false,
          show: xAxisData.length > 7 ? true : false,
          left: 75,
          right: 80
        }
      }
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData,
          bottom: 10
        },
        color: colorList,
        dataZoom,
        grid: {
          x: 55, //左
          y: 15, //上
          x2: 20, //右
          y2: 100
        },
        toolbox: {
          feature: {}
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: xAxisData,
          axisLine: {
            show: false
          },
          axisTick: {
            //X轴刻度线
            show: false
          },
          axisLabel: {
            // interval: 0,
            rotate: 40
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          splitLine: {
            //网格线
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: this.setSeriesData(seriesData, colorList)
      }
      return option
    },
    setSeriesData(seriesData, colorList) {
      colorList.reverse()
      return seriesData.map((item, index) => {
        return {
          type: 'line',
          // stack: 'Total',
          ...item,
          showSymbol: false,
          smooth: true,
          symbol: 'none'
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       // color: colorList[index]
          //     }
          //   }
          // }
        }
      })
    }
  }
}
